<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clockBox{
            margin-top: 10px;
            font-family: "clockIcon";
            font-size: 40px;
            line-height: 60px;
        }
        .clockBox .milli{
            font-size: 20px;
        }
        @font-face {
            font-family: "clockIcon";
            src: url('../font/clockicons.woff2');
        }
    </style>
</head>
<body>
    <div class="button-group">
        <button class="start">开始</button>
        <button class="pause">暂停</button>
        <button class="reset">重置</button>
    </div>
    <div class="clockBox">
        00:00<span class="milli">.00</span>
    </div>
</body>
<script>

    var startBtn = document.getElementsByClassName("start")[0];
    var pauseBtn = document.getElementsByClassName("pause")[0];
    var resetBtn = document.getElementsByClassName("reset")[0];

    var clockBox = document.getElementsByClassName("clockBox")[0];


    // 注意:
    // HTML5标准规定 setTimeout的最短时间间隔是4毫秒: setInterval的最短间隔时间是10毫秒,也就是说,小于10毫秒的时间间隔会被调整到10毫秒


    // 问题1:
    // 变量跨作用域 => 在一个作用域中什么的变量 在另一个函数作用域中使用
    // 解决方法 -> 将变量提取到两个作用域都能访问的位置 => 全局作用有

    // 问题2: 
    // 每次点击开始 都会启动一个新的计时器 -> 连续启动多个 -> timer只能记录最后一个 -> 也只能清除最后一个
    // a. 每次启动下一个之前,先清除上一个 -> 保证只能启动一个

    var ms = 0;  //全局变量 毫秒计数

    var timer = null;

    // 点击开始按钮 -> 启动计时器
    startBtn.onclick = function(){
        // clearInterval(timer);   // 先清除上一个,启动下一个
        timer = setInterval(function(){
            ms += 10;
            // console.log(ms);

            // 计数的ms 解析为 分 秒 毫秒(百位+十位)
            var milli = (ms % 1000) / 10;
            var second = parseInt( ms / 1000) % 60;  // 秒 % 60
            var minute = parseInt(ms / 1000 / 60) % 60; // 分 % 60

            clockBox.innerHTML = `${beauty(minute)}:${beauty(second)}<span class="milli">.${beauty(milli)}</span>`;


        },10);
    }

    pauseBtn.onclick = function(){
        clearInterval(timer);
    }

    resetBtn.onclick = function(){
        clearInterval(timer);
        clockBox.innerHTML = `${beauty(0)}:${beauty(0)}<span class="milli">.${beauty(0)}</span>`;
        ms = 0;

    }

    function beauty(num) {
        return num < 10 ? "0" + num : num;
    }




</script>
</html>